<template>
  <Layout style="background:#fff;">
    <Row>
      <Col span="5">
        <Steps :current="stepCurrent" direction="vertical">
          <Step title="基础信息" />
          <Step title="采集信息配置" />
          <Step title="其他信息" />
        </Steps>
      </Col>
      <Col span="19">
        <!-- 步骤 1 -->
        <base-data ref="base-data-ref" v-show="stepCurrent === 0"></base-data>

        <!-- 步骤 2 -->
        <template>
          <!-- dtu 采集方式 -->
          <dtu
            ref="dtu-ref"
            v-show="collectType === 'dtu' && stepCurrent === 1"
            :form="formData"
            :collectType="collectType"
          ></dtu>

          <!-- 网关采集方式 -->
          <wang-guan
            ref="wang-guan-ref"
            v-show="collectType === 'wang-guan' && stepCurrent === 1"
            :collectType="collectType"
            :form="formData"
          ></wang-guan>

          <!-- 串口服务器 -->
          <chuan-kou
            ref="chuan-kou-ref"
            v-show="collectType === 'chuan-kou' && stepCurrent === 1"
            :collectType="collectType"
            :form="formData"
          >
          </chuan-kou>
        </template>

        <!-- 步骤 3 -->
        <template v-if="companyType === 'no-power' && stepCurrent === 2">
          <!-- 106 设备数据 -->
          <form-106
            ref="form-106-ref"
            :form="formData"
            :collectType="collectType"
            v-show="deviceType === '106'"
          ></form-106>

          <!-- 126 设备数据 -->
          <ruikong-126
            ref="form-126-ref"
            :form="formData"
            :collectType="collectType"
            v-show="deviceType === 'rui-kong'"
          >
          </ruikong-126>

          <!-- 4 通道 117设备数据 -->
          <form-117-4
            ref="form-117-4-ref"
            :form="formData"
            :collectType="collectType"
            v-show="deviceType === '117-4'"
          ></form-117-4>

          <!-- 8 通道 117设备数据 -->
          <form-117-8
            ref="form-117-8-ref"
            :form="formData"
            :collectType="collectType"
            v-show="deviceType === '117-8'"
          >
          </form-117-8>
        </template>

        <!-- 配电企业 步骤 2  -->
        <template v-if="companyType === 'power' && stepCurrent === 2">
          <power-company-form
            ref="power-company-form-ref"
            :form="formData"
            :collectType="collectType"
          ></power-company-form>
        </template>
      </Col>
    </Row>
    <Row
      class="add-device-dialog-footer"
      style="text-align:right; border-top:1px solid #e8eaec;padding-top:15px;"
    >
      <!-- 每一个页面都显示 -->
      <Button type="warning" @click="handleCancel">取消</Button>

      <!-- 第0步骤和第1步骤显示 -->
      <Button v-if="stepCurrent === 0" @click="handleNextStep(0)"
        >下一步</Button
      >

      <!-- 第1步骤和第2步骤显示 -->
      <Button v-if="stepCurrent === 1" @click="handleLastStep(0)"
        >上一步</Button
      >

      <!-- 第0步骤和第1步骤显示 -->
      <Button v-if="stepCurrent === 1" @click="handleNextStep(1)"
        >下一步</Button
      >
      <!-- 第1步骤和第2步骤显示 -->
      <Button v-if="stepCurrent === 2" @click="handleLastStep(1)"
        >上一步</Button
      >

      <!-- 第2步骤显示 -->
      <Button v-if="stepCurrent === 2" @click="handleSubmit" type="primary"
        >提交</Button
      >
    </Row>
  </Layout>
</template>
<script>
import { addDevice as httpPostDevice } from '@/api'

import BaseData from './BaseData'
import Dtu from './Dtu'
import WangGuan from './WangGuan'
import ChuanKou from './ChuanKou'

import Form106 from './Form-106'
import RuiKong126 from './RuiKong-126'
import Form1174 from './Form-117-4'
import Form1178 from './Form-117-8'
import PowerCompanyForm from './PowerCompanyForm'

export default {
  components: {
    'base-data': BaseData,
    dtu: Dtu,
    'form-106': Form106,
    'wang-guan': WangGuan,
    'ruikong-126': RuiKong126,
    'form-117-4': Form1174,
    'form-117-8': Form1178,
    'power-company-form': PowerCompanyForm,
    'chuan-kou': ChuanKou
  },
  data() {
    return {
      stepCurrent: 0,
      companyType: 'no-power',
      deviceType: null,
      collectType: null,
      formData: {}
    }
  },
  methods: {
    handleNextStep(index) {
      if (index === 0) {
        this.$refs['base-data-ref'].validate((valid, ...args) => {
          if (valid) {
            const params = args[0]
            const { companyType, deviceType, collectType, formData } = params
            this.companyType = companyType
            this.deviceType = deviceType
            this.collectType = collectType
            this.formData = Object.assign({}, formData)
            if (deviceType === 'rui-kong') {
              this.stepCurrent = 2
            } else {
              this.stepCurrent = 1
              if (this.collectType === 'dtu') {
                //
              } else if (this.collectType === 'wang-guan') {
                this.$refs['wang-guan-ref'].resetFields()
              } else if (this.collectType === 'chuan-kou') {
                //
              }
            }
          }
        })
      } else {
        if (this.collectType === 'dtu') {
          this.$refs['dtu-ref'].validate((valid, ...args) => {
            if (valid) {
              const params = args[0]
              const { formData } = params
              this.formData = Object.assign({}, formData)
              this.stepCurrent = 2
            }
          })
        } else if (this.collectType === 'wang-guan') {
          this.$refs['wang-guan-ref'].validate((valid, ...args) => {
            if (valid) {
              const params = args[0]
              const { formData } = params
              this.formData = Object.assign({}, formData)
              this.stepCurrent = 2
            }
          })
        } else if (this.collectType === 'chuan-kou') {
          this.$refs['chuan-kou-ref'].validate((valid, ...args) => {
            if (valid) {
              const params = args[0]
              const { formData } = params
              this.formData = Object.assign({}, formData)
              this.stepCurrent = 2
            }
          })
        } else {
          // 其他采集方式
        }
      }
    },

    handleLastStep(index) {
      if (index === 1 && this.deviceType === 'rui-kong') {
        this.stepCurrent = 0
      } else {
        this.stepCurrent = index
      }
    },

    handleCancel() {
      this.$emit('on-off')
    },

    handleSubmit() {
      if (this.companyType === 'no-power') {
        if (this.deviceType === '106') {
          this.$refs['form-106-ref'].validate((valid, ...args) => {
            if (valid) {
              const params = args[0]
              this.postDevice(params)
            }
          })
        } else if (this.deviceType === 'rui-kong') {
          this.$refs['form-126-ref'].validate((valid, ...args) => {
            if (valid) {
              const params = args[0]
              this.postDevice(params)
            }
          })
        } else if (this.deviceType === '117-4') {
          this.$refs['form-117-4-ref'].validate((valid, ...args) => {
            if (valid) {
              const params = args[0]
              this.postDevice(params)
            }
          })
        } else if (this.deviceType === '117-8') {
          this.$refs['form-117-8-ref'].validate((valid, ...args) => {
            if (valid) {
              const params = args[0]
              this.postDevice(params)
            }
          })
        }
      } else {
        this.$refs['power-company-form-ref'].validate((valid, ...args) => {
          if (valid) {
            const params = args[0]
            this.postDevice(params)
          }
        })
      }
    },

    postDevice(value) {
      const vm = this
      const { formData: params } = value
      httpPostDevice(params).then(res => {
        if (res.code === 200) {
          vm.$Message.success('新建设备成功')
          vm.$emit('on-save')
        } else vm.$Message.error(res.message)
      })
    }
  }
}
</script>
